<template>
  <div>
    <!-- 页面顶部-->
    <header id="top">
      <div class="top" style="text-align: center;">
        <span  class=c1>欢迎注册</span>
      </div>
    </header>
    <div class="parent">
      <div class="container">
        <div class="panel rt">
          <form id="form-register" @submit.prevent="register">
            <div class="txt" style="text-align:center;margin-bottom:150px">
              <p style="font-size: 50px; font-weight: bolder">
                新用户注册
                <span >
                  <router-link to="/login" style="color: #33ccff; text-decoration: none">
                    直接登录
                  </router-link>
                </span>
              </p>
            </div>
            <div class="hf">
              <div class="five">
              <div class="form-group" style="font-size:20px;text-align:center;margin-bottom:50px;">
                <label for="uname">用户姓名:</label>
                <input
                class="i1"
                  style="width: 500px; height: 40px"
                  v-model="uname"
                  autocomplete
                  required
                  minlength="2"
                  maxlength="12"
                  type="text"
                  placeholder="用户名长度在3到12位之间"
                  autofocus
                  name="uname"
                  id="uname"
                />
                <!-- <span class="msg-default"
                  >用户名长度在3到12位之间</span
                > -->
              </div>
              <div class="form-group" style="font-size:20px;text-align:center;margin-bottom:50px;">
                <label for="upwd">登录密码:</label>
                <input
                class="i2"
                  style="width: 500px; height: 40px"
                  v-model="upwd"
                  required
                  type="password"
                  minlength="6"
                  maxlength="12"
                  placeholder="密码长度在6到12位之间"
                  name="upwd"
                  autofocus
                  id="upwd"
                />
                <!-- <span class="msg-default hidden"
                  >密码长度在6到12位之间</span
                > -->
              </div>
              <!-- <div class="form-group" style="font-size:20px;text-align:center;margin-bottom:50px;">
                <label for="upwdconfirm">确认密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input
                  style="width: 500px; height: 40px"
                  v-model="re_upwd"
                  required
                  type="password"
                  minlength="6"
                  maxlength="12"
                  placeholder="请确认密码"
                  name="upwdconfirm"
                  autofocus
                  id="upwdconfirm"
                />
                <span class="msg-default hidden"
                  >密码长度在6到12位之间</span
                >
              </div> -->
              <div class="form-group" style="font-size:20px;text-align:center;margin-bottom:50px;">
                <label for="appleId">appId:</label>
                <input
                class="i3"
                  style="width: 500px; height: 40px;"
                  v-model="appleId"
                  autocomplete
                  required
                  type="email"
                  placeholder="请输入合法的邮箱地址"
                  pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
                  name="appleId"
                  id="appleId"
                  @blur="checkAppleid"
                />
                <!-- <span class="msg-default hidden"
                  >请输入合法的邮箱地址</span
                > -->
              </div>
              <div class="form-group" style="font-size:20px;text-align:center;margin-bottom:50px;">
                <label for="phone">手机号:</label>
                <input
                class="i4"
                  style="width: 500px; height: 40px"
                  v-model="phone"
                  id="phone"
                  name="phone"
                  placeholder="请输入合法的手机号"
                  pattern="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$"
                  required
                  type="text"
                />
                <!-- <span class="msg-default hidden"
                  >请输入合法的手机号</span
                > -->
              </div>
              <div class="form-group" style="text-align:center">
                <label></label>
                <button
                  style="width: 300px;  height: 40px; margin-bottom: 500px; color: white; background-color: #44ccff;border:0"
                  id="bt-register"
                >提交注册信息</button>
              </div>

              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
        <msg-mask ref="msgMaskbtn" />
  </div>
</template>
<script>
import MsgMask from '@/components/MsgMask.vue'
import axios from 'axios'
   export default {
    components: { MsgMask },
  methods: {
    checkAppleid(){
      //检查是否有同名邮箱（appid）
      let url = `http://localhost:3000/user?appleId=${this.appleId}`
      axios.get(url).then(res=>{
        console.log(res.data)
        if(res.data.length>0){
          //代表存在重名邮箱用户，则判断为不能通过
          this.hasSeemappleid = true;
          return true
        }else{
          this.hasSeemappleid = false;
          return false
        }
      })
    },
    register() {
      var url = 'http://localhost:3000/user'
      // 在注册之前必须再检查一次邮箱是否有重复
      this.checkAppleid();
      if(this.hasSeemappleid){
        //代表存在重名邮箱用户，则判断为不能通过
        this.$refs.msgMaskbtn.setInformation({
              title: "邮箱有重复，请重新输入",
              callback(){
                //给输入框获得焦点
                appleId.focus()
              }
        });
        this.$refs.msgMaskbtn.showbtnMask(); 
        return;
      }else{
        let u = {
          appleId:this.appleId,
          username:this.uname,
          password:this.upwd,
          phone:this.phone
        }
        this.axios.post(url,u).then(res => {
        console.log(res.data)
        if(res.data.length ==0){
          //失败
          this.$refs.msgMaskbtn.setInformation({
              title: "注册失败",
              btnTitle:'重新试试',
          });
          this.$refs.msgMaskbtn.showbtnMask();
        }else{
          //注册成功
          this.$refs.msgMaskbtn.setInformation({
              title: "注册成功",
              btnTitle:'去登陆',
              callback(){
                this.$router.push("/login");
              }
          });
          this.$refs.msgMaskbtn.showbtnMask();
        }
      })

      }
    },
  },
  data() {
    return {
      uname: '',
      upwd: '',
      re_upwd: '',
      appleId: '',
      phone: '',
      hasSeemappleid:false,
    }
  },
}
</script>

<style lang="less" scoped>
  #register{
    width: 100%;
    height: 100%;
  }
</style>
<style src="../assets/css/register.css"></style>